<!--
 * @Author: xujianwei
 * @Date: 2021-05-08 14:17:58
 * @LastEditors: xujianwei
 * @LastEditTime: 2021-05-18 15:40:37
-->
<template>
<div class="note">
  <div  class="affix">
      <a-badge count="5">
        <a-button type="primary">Affix top</a-button>
      </a-badge>
  </div>
    <a-timeline mode="alternate">
      <a-timeline-item>
        <template #dot>2015年</template>
        <div><br/></div>
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>06月26</template>
        <div><br/></div>
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
        laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
        beatae vitae dicta sunt explicabo.
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
        Technical testing 2015-09-01
      </a-timeline-item>
      <a-timeline-item>
        <template #dot>3月24</template>
        Technical testing 2015-09-01
      </a-timeline-item>
    </a-timeline>
</div>
</template>

<script>
import { ClockCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';
export default defineComponent({
  components: {
    ClockCircleOutlined,
  },
  setup(){
    
  }
});
</script>

<style >
.ant-timeline-item-head{
  padding:5px 10px;
    background: rgba(0,0,0,.1);
}
.ant-timeline-item-content{
      width: calc(50% - 40px)!important;
      margin-left: 40px;
}
.ant-timeline-item-tail{
    top: 21px;
    height: calc(100% - 32px);
    border-left: 2px solid rgba(0,0,0,0.1);
}
.ant-timeline{
  width: 1200px;
  margin: 0 auto;
}

</style>
<style lang='scss' scoped>

.note{
  background: #f5f5d5;
  min-height: 100%;
  overflow-y: auto;
  padding-top:70px;
  .affix{
    background: #e3e9db;
    opacity: 1;
    height: 50px;
    position: fixed;
    width: 100%;
    top:0;
    padding: 10px 100px;
    z-index: 1;
  }
}
</style>